<template>
    <div class="sidebar">
      <Menu class="nav" ref="sidebarMenu" :active-name="setActiveName" :open-names="setOpenName" @on-select="menuSelect" :accordion="true" width="auto">
        <Submenu v-for="(submenu, index) in sidebarNav" :name="index" :key="index">
        	
            <template slot="title"><Icon :type="submenu.icon"></Icon>{{ submenu.permission_parent_name }}</template>
     
            <MenuItem v-for="(menuitem, index) in submenu.permission_child" :name="menuitem.permission_child_url" :key="index">
            	{{ menuitem.permission_child_name }}
            </MenuItem>
            
        </Submenu>
      </Menu>
      <!--
      	on-select	选择菜单（MenuItem）时触发	 @on-select="menuSelect"  menuSelect事件可以拿到MenuItem的name值
      	accordion	是否开启手风琴模式，开启后每次至多展开一个子菜单
      	open-names	展开的 Submenu 的 name 集合
      	active-name	激活菜单的 name 值
      -->
        	<!--<Menu class="nav" :accordion="true" :open-names='setOpenName'>
                <Submenu v-for='(item,itemIndex) in sidebarNav'  name="1">
                	<template slot="title">
                		<Icon :type='item.icon'></Icon>
                		{{item.permission_parent_name}}               		
                   </template>
                    <MenuItem name="2" v-for='(subItem,subIndex) in item.permission_child'>{{subItem.permission_child_url}}</MenuItem>
                </Submenu>	
            </Menu>-->
    </div>
</template>

<script>
export default {
  computed: {
    // 获取侧边栏
    sidebarNav() {
      let sidebarNav = JSON.parse(localStorage.getItem("sidebarnav"));
    //  console.log(sidebarNav)
      // if(sidebarNav){
      //   return sidebarNav
      // } else {
      //   return []
      // }
      return sidebarNav
    },
    // 设置侧边展开栏
    setOpenName(name) {
    	//console.log(name)
    	//  刚进home页面的时候 侧边栏 菜单 全部都是关闭的
      if (this.$route.path == "/home") {
        this.$nextTick(() => {
          this.$refs.sidebarMenu.$children.forEach(item => {
            item.opened = false;
          });
        });
        return [];
      } else {
        //	var a = this.$route.path      	
        //	console.log(a.split('/')[1])
        let openName = this.$route.path.match(/\w+/)[0];  
        return [openName];
      }
    },
    // 设置侧边选中栏
    setActiveName() {
      // 清除会员Id
      var removeReg = /^\/vipdata\/vip\/edit/
      if(!removeReg.test(this.$route.path)){
        localStorage.removeItem("vipId");
      }
      // 清除会员卡号
      localStorage.removeItem("vipnumber")

      if (this.$route.path == "/home") {
        return "";
      } else {
        let activeName = this.$route.path;
        return activeName;
      }
    }
  },
  methods: {
    // 侧边导航选择
    menuSelect(name) {
    	//console.log(name)  finance/rechargerecord   可以获取到点击的地址
      // 清除新增会员默认模版
      localStorage.removeItem("isTemp")
      localStorage.removeItem("isOn")
      this.$router.push(name);
    }
  }
};
</script>

<style lang="less" scoped>
.sidebar {
  display: block;
  position: absolute;
  width: 250px;
  left: 0;
  top: 70px;
  bottom: 0;
  background: #0b9595;

  .nav {
    height: 100%;
    color: #fff;
    font-size: 16px;
    background-color: transparent;

    &:after {
      width: 0;
    }

    .ivu-menu-item-active,
    .ivu-menu-opened,
    .ivu-menu-submenu :hover {
      background-color: #097e7e;
    }

    .ivu-menu-item.ivu-menu-item-selected {
      border-right: none;
      background-color: #086868;
    }

    .ivu-menu-item {
      font-size: 16px;
      color: #fff;

      &:hover {
        background-color: #086868;
      }
    }
  }
}
</style>

